<template>
  <div class="zero-contrainer">
    <div class="carousel">
      <el-carousel
        class="carousel-contrainer"
        indicator-position="outside"
        height="350px"
      >
        <el-carousel-item v-for="item in bannerLists" :key="item.videoId">
          <img
            :src="item.url"
            alt="轮播图加载失败"
            style="width: 100%; max-height: 400px"
          />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="main-category">
      <div class="country-category">
        <div class="country-category-title">
          <span>按地区</span>
        </div>
        <div class="country-category-content">
          <template v-for="item in list1.videoSortEntity"> <a href="javascript:void(0);" @click.prevent="goDetail(list1.id,item.id)">{{ item.title }}</a>
          </template>
        </div>
      </div>
      <div class="language-category">
        <div class="language-category-title">
          <span>按时间</span>
        </div>
        <div class="language-category-content">
          <template v-for="item in list2.videoSortEntity">
            <a href="javascript:void(0);" @click.prevent="goDetail(list2.id,item.id)">{{ item.title }}</a>
          </template>
        </div>
      </div>
      <div class="class-category">
        <div class="class-category-title">
          <span>按类型</span>
        </div>
        <div class="class-category-content">
          <template v-for="item in list3.videoSortEntity">
            <a href="javascript:void(0);" @click.prevent="goDetail(list3.id,item.id)">{{ item.title }}</a>
          </template>
        </div>
      </div>
    </div>
    <div class="line"></div>
    <div class="lists">
      <template v-for="(item1,index) in vlists">
        <div class="lists-title" :key="index">
          <span>{{item1}}</span>
          <span><a href="javascript:void(0)" @click="more">查看更多</a></span>
        </div>
        <div class="lists-content" :key="index">
          <template v-for="item in 5">
            <div class="item" :key="item"
              style="padding:10px"
            >
              <img
                @click="look(host_list[item+index*5].videoId)"
                :src="host_list[item+index*5].videoCover"
                alt=""
                width="100%"
              />
              <div class="produce">
                <span>{{host_list[item+index*5].videoName}}</span>
              </div>
            </div>
          </template>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import { getHomeData } from "../../api/home";
import { getAllSort } from "../../api/search";
export default {
  name: "Zero",
  data() {
    return {
      bannerLists: [],
      list1: [], //地区
      list2: [], //时间
      list3: [], //类型
      host_list:[],//热门
      vlists:[
        '热门电影','最新上线','最多好评'
      ]
    };
  },
  methods: {
    more(){
      this.$router.push({
        path:'/detail/1'
      })
    },
    look(i) {
      this.$router.push({
        path: "/second",
        query: {
          v_id: i,
        },
      });
    },
    goDetail(parentId,id){
      this.$router.push({
        path:'/detail/1',
        query:{
          parentId,
          id
        }
      })
    }
  },
  created() {
    getHomeData().then((res) => {
      this.bannerLists = res.data.homeData.fileList;
      this.host_list = res.data.homeData.video
    });
    getAllSort().then((res) => {
      this.list1 = res.data.list[0];
      this.list2 = res.data.list[1];
      this.list3 = res.data.list[2];
    });
  },
};
</script>

<style lang="less">
.main-category {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  .country-category {
    width: 25%;
    .country-category-title {
      span {
        color: white;
        font-size: 15px;
        font-weight: bold;
        padding: 3px;
        background-color: #99a9bf;
      }
    }
    .country-category-content {
      margin-top: 10px;
      width: 100%;
      display: grid;
      grid-template-columns: repeat(4, 1fr);

      a {
        color: rgb(78, 73, 73);
        font-size: 13px;
        text-decoration: none;
      }
    }
  }
  .class-category {
    width: 50%;
    .class-category-title {
      span {
        color: white;
        font-size: 15px;
        font-weight: bold;
        padding: 3px;
        background-color: #99a9bf;
      }
    }
    .class-category-content {
      margin-top: 10px;
      width: 100%;
      display: grid;
      justify-content: start;
      grid-template-columns: repeat(10, 1fr);
      a {
        font-size: 13px;
        color: rgb(78, 73, 73);
        text-decoration: none;
      }
    }
  }
  .language-category {
    width: 23%;
    .language-category-title {
      span {
        color: white;
        font-size: 15px;
        font-weight: bold;
        padding: 3px;
        background-color: #99a9bf;
      }
    }
    .language-category-content {
      margin-top: 10px;
      width: 100%;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      a {
        font-size: 13px;
        color: rgb(78, 73, 73);
        text-decoration: none;
      }
    }
  }
}
.line {
  width: 100%;
  height: 3px;
  background-color: #d3dce6;
  margin: 10px 0;
}
.lists {
  width: 100%;
  .lists-title {
    margin: 10px 0;
    display: flex;
    justify-content: space-between;
    span:nth-child(1) {
      font-size: 22px;
      font-weight: bold;
      color: palevioletred;
    }
    span:nth-child(2) {
      a {
        color: #475669;
        font-size: 15px;
        text-decoration: none;
      }
    }
  }
  .lists-content {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr repeat(3, 1fr) 1fr;
    grid-gap: 10px;
    .item {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      border: 2px solid rgb(230, 226, 226);
      box-shadow: #c0c2c4 0px 0px 10px;
      border-radius: 5px;
      padding: 15px 0;
      img {
        border-radius: 3px;
        &:hover {
          transform: scale(1.08); // 放大1.5倍
          transition: all 0.6s; // 设置加载时间
        }
      }
    }
    .produce {
      padding-top: 5px;
      font-size: 16px;
      font-weight: bold;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: flex-start;
    }
  }
}
</style>